<template>
    文本插值: {{ text }}
    <div v-html="htmlText"></div>
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
    <img v-bind:src="imgSrc" alt="">
    <img :src="imgSrc" alt="">

    <button v-on:click="emitAlert">登录</button>
    <button @click="emitAlert">登录-简写</button>
    <div>
        <p>v-if</p>
        <p>num:{{ num }}</p>
        <button @click="num = 1">num 变为1</button>
        <button @click="num = 2">num 变为2</button>
        <button @click="num = 3">num 变为3</button>

        <p v-if="num == 1">num 是1+++</p>
        <p v-else-if="num == 2">num 是2----</p>
        <p v-else>num 是3@@@@</p>

        <p v-show="num == 1">num现在是1， v-show写法</p>
    </div>
    <p>v-for</p>
    <p v-for="(item, index)  in todoArr">index: {{ index }}, item: {{ item }}</p>
    <p v-for="(value, key, index) in myObject">index:{{ index }}, key:{{ key }}, value:{{ value }}</p>

    <p>v-model</p>
    input： <el-input v-model="inputValue" />
    输入的指: {{ inputValue }}
    <div>
        radio:
        <el-radio-group v-model="radio">
            <el-radio value="1" size="large">Option 1</el-radio>
            <el-radio value="2" size="large">Option 2</el-radio>
            <el-radio value="3" size="large">Option 3</el-radio>
            <el-radio value="4" size="large">Option 4</el-radio>
        </el-radio-group>
        radio的值是 {{ radio }}
    </div>
    <div>
        checkbox:
        <el-checkbox-group v-model="checkList">
            <el-checkbox label="字母A" value="A" />
            <el-checkbox label="字母B" value="B" />
            <el-checkbox label="字母C" value="C" />
        </el-checkbox-group>
        checkList的值是{{ checkList }}
    </div>
    <div>
        textarea
        <el-input v-model="textarea" type="textarea" placeholder="Please input" />
        textarea的值是 {{ textarea }}
    </div>

</template>


<script setup>
import { ref } from 'vue'

// const text = ref('hello world')
const text = ref('<span>这是一个html标签</span>')

const htmlText = ref('<span>这是一个html标签</span>')

const imgSrc = ref('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png')

function emitAlert() {
    alert('登录了')
}

const num = ref(1)

const todoArr = ref(
    ['吃', '喝', '学', '睡']
)

const myObject = ref(
    {
        a: 'tom',
        b: 'jerry',
        c: 'bigDog'
    }
)

const inputValue = ref('')

const radio = ref('')

const checkList = ref([])

const textarea = ref('')

const  a = 2222

</script>